<link rel="stylesheet" href="__PUBLIC__/plugin/autocomplete/jquery.autocomplete.css">
<script type="text/javascript" src="/Public/js/jquery.form.min.js"></script>
<script language="javascript" type="text/javascript" src="__PUBLIC__/plugin/autocomplete/jquery.autocomplete.js"></script>
<script language="javascript" type="text/javascript" src="__PUBLIC__/js/My97DatePicker/WdatePicker.js"></script>
<style type="text/css">
 dl{
  overflow: hidden;
  zoom: 1;
  margin-bottom: 20px;
  font-family: '微软雅黑';
  font-size: 14px;
}
 dt{
    float: left;
    width: 100px;
    font-size: 14px;
    padding: 3px 0 0 0;
    color: #333;
    text-align: right;
}
 dd input[type='text']{
  height: 28px;
  font-size: 12px;
  padding: 0 2px;
  margin: 0 10px 0 10px;
  box-sizing: border-box;
}
</style>
<div class="main_top">
  <a href ="{:U(MODULE_NAME.'/Product/actedit', array('id'=>$id,'step'=>'0'))}" <if condition="($step eq false) OR ($step eq '0')">class="bg_blue"</if> >主要信息</a>
  <a href ="{:U(MODULE_NAME.'/Product/actedit', array('id'=>$id,'step'=>'1'))}" <if condition="$step eq '1'">class="bg_blue"</if> >套票信息</a>
</div>
<div class="form">
  <form method='post' id="form_do" name="form_do" action="{:U(MODULE_NAME.'/Product/actedit',array('id'=>$id,'step'=>$step))}">

  <if condition="($step eq false) OR ($step eq '0')">

    <dl>
      <dt>活动名称：</dt>
      <dd>
        <input type="text" name="title" class="inp_large" maxlength="20"  value="{$info.title}" /><font color="red">(最长20个字符)</font>
      </dd>
    </dl>
    <dl>
      <dt>预售期：</dt>
      <dd>
      <input  type="text" class="Wdate input-s" onClick="WdatePicker()" name="presellDateStart" value="{$info.presellDateStart|date='Y-m-d',###}"  readonly="readonly" />
      -
      <input  type="text" class="Wdate input-s" onClick="WdatePicker()" name="presellDateEnd" value="{$info.presellDateEnd|date='Y-m-d',###}"  readonly="readonly" />
      <input type="checkbox" name="presellDateFullPrice" <if condition="$info['presellDateFullPrice'] eq '1'">checked</if> value="1">预售期可全价购买
      </dd>
    </dl>
    <dl>
      <dt>尾款期：</dt>
      <dd>
      <input  type="text" class="Wdate input-s" onClick="WdatePicker()" name="paymentDateStart" value="{$info.paymentDateStart|date='Y-m-d',###}" readonly="readonly" />
      -
      <input  type="text" class="Wdate input-s" onClick="WdatePicker()" name="paymentDateEnd" value="{$info.paymentDateEnd|date='Y-m-d',###}" readonly="readonly" />
      <input type="checkbox" name="presellDatePaymentPrice" <if condition="$info['presellDatePaymentPrice'] eq '1'">checked</if> value="1">预售期可付尾款
      </dd>
    </dl>
    <dl>
      <dt>预约期：</dt>
      <dd>
      <input  type="text" class="Wdate input-s" onClick="WdatePicker()" name="appointmentDateStart" value="{$info.appointmentDateStart|date='Y-m-d',###}" readonly="readonly" />
      -
      <input  type="text" class="Wdate input-s" onClick="WdatePicker()" name="appointmentDateEnd" value="{$info.appointmentDateEnd|date='Y-m-d',###}" readonly="readonly" />
      </dd>
    </dl>
    <dl>
      <dt> 活动图片：</dt>
      <dd>
        <div style="width: 120px; height: 120px;  border: 1px #CCC solid;   position: relative;   overflow: hidden; text-align: center;vertical-align: middle;cursor: pointer;">
          <input type="file" name="filedata" id="actPic" onChange="uploadPic(this,'actPic')" style="width:120px; height: 120px; position: absolute; right: 0;left: 0;bottom: 0;top: 0;margin: auto;opacity: 0;z-index: 9999">
          <div  class="fileupload" style="  position: absolute;width: 120px;height: auto;right: 0;left: 0;bottom: 0;top: 0;margin: auto;">
            <if condition="$info['actPic']" >
            <img src="http://www.tripvip.cn{$info.actPic}" width="120" height="120">
            <input type="hidden" name="actPic" class="actPic" value="{$info.actPic}">
            </if>
          </div>
        </div>
      </dd>
    </dl>

  <elseif condition="$step eq '1'" />

  <div class="operate2">
    <ul>
      <li onclick="packageAddOrEdit('add')"><span class="icon-add01"></span>添加套票</li>
      <!-- <li onclick="addProduct()"><span class="icon-add01"></span>添加产品</li> -->
    </ul>
    <div class="clear"></div>
  </div>
  <foreach name="packageArr" item="packageArr">
  <table class="list">
      <thead>
        <tr>
          <td>{$packageArr.title}</td>
          <td>预售款 {$packageArr.presellPrice} 元</td>
          <td>尾款 {$packageArr.paymentPrice} 元</td>
          <td>预约 {$packageArr.appointmentNums} 次</td>
          <td>
            <a href="javascript:;" onclick="packageAddOrEdit('edit','{$packageArr.id}','{$packageArr.title}','{$packageArr.presellPrice}','{$packageArr.paymentPrice}','{$packageArr.couponsID}','{$packageArr.couponsName}','{$packageArr.appointmentNums}')">编辑</a>
            <a href="javascript:;" onclick="presellDel('{$packageArr.id}','package','{$packageArr.title}')">删除</a>
            <a href="javascript:;" onclick="groupAddOrEdit('add','{$packageArr.id}')">+新增分组</a>
            <!-- <a href="javascript:;" onclick="addProduct()">+新增产品</a> -->
          </td>
          <td>共有 {$packageArr.groupNums} 个分组， {$packageArr.productNums} 个产品</td>
        </tr>
      </thead>
      <tbody>
      <foreach name="packageArr.groupArr" item="groupArr">
        <foreach name="groupArr.productArr" key="key" item="productArr">
          <tr>
            <if condition="$key eq '0' ">
            <td rowspan="{$groupArr.productNums}" colspan="2">
              <div>
                <p>{$groupArr.title} <a href="javascript:;" onclick="groupAddOrEdit('edit',{$packageArr.id},'{$groupArr.id}','{$groupArr.title}','{$groupArr.appointmentCheck}')">编辑</a><a href="javascript:;" onclick="presellDel('{$groupArr.id}','group','{$groupArr.title}')">删除</a></p>
                <p><a href="javascript:;" onclick="productAddOrEdit('add','{$groupArr.id}','{$groupArr.title}','{$packageArr.title}')">添加产品</a></p>
              </div>
            </td>
            </if>
            <td>{$productArr.productID}</td>
            <td>{$productArr.title|subtext = 15}</td>
            <td><if condition="$productArr['id'] eq false "><else /><a href="javascript:;" onclick="productAddOrEdit('edit','{$groupArr.id}','{$groupArr.title}','{$packageArr.title}','{$productArr.id}' ,'{$productArr.productID}','{$productArr.title}','{$productArr.appointmentCheck}')">编辑</a><a href="javascript:;" onclick="presellDel('{$productArr.id}','product','{$productArr.title}')">删除</a></if></td>
            <td></td>
          </tr>
        </foreach>
      </foreach>
      </tbody>
  </table>
  </foreach>

  </if>

    <div class="form_b" style="width: 300px; margin-left: 110px;">
      <input type="button" class="button-green" onclick="submitDo()" value="保 存">
      &nbsp;
      <input type="button" onclick="goUrl('{:U('/Home/Product/actlist')}')" class="button-return" value="返回产品列表">
    </div>
  </form>
</div>
<script type="text/javascript">
$(function() {

  wrapForm('actPic','actPic');

});

/**
 * [presellDel description]
 * @param  {[type]} typeID [description]
 * @param  {[type]} type   [description]
 * @param  {[type]} title  [description]
 * @param  {[type]} pId    [description]
 * @return {[type]}        [description]
 */
function  presellDel(typeID,type,title)
{
  //询问框
  layer.confirm('确定要删除【'+title+'】吗？', {
      btn: ['确认','取消'] //按钮
  }, function(){
      presellDelAjax(typeID,type,title);
  }, function(){
      layer.msg('取消了删除【'+title+'】', {shift: 6});
  });
}

/**
 * [presellDelAjax description]
 * @param  {[type]} typeID [description]
 * @param  {[type]} type   [description]
 * @param  {[type]} pId    [description]
 * @param  {[type]} title  [description]
 * @return {[type]}        [description]
 */
function presellDelAjax(typeID,type,pId,title)
{
  $.ajax({
    url: '{:U(MODULE_NAME.'/Product/presellDelAjax')}',
    type: 'POST',
    dataType: 'json',
    data: {'typeID': typeID, 'type': type ,'title' : title},
    success:function  (data)
    {
      if(data.valid == true)
      {
        layer.msg(data.state, {icon: 1});
        location.reload();
      }
      else
      {
        layer.msg(data.state, {icon: 2});
      }

    }
  })
}

/**
 * [packageAddOrEdit description]
 * @param  {[type]} executeType     [description]
 * @param  {[type]} typeID          [description]
 * @param  {[type]} title           [description]
 * @param  {[type]} presellPrice    [description]
 * @param  {[type]} paymentPrice    [description]
 * @param  {[type]} appointmentNums [description]
 * @return {[type]}                 [description]
 */
function  packageAddOrEdit(executeType,typeID,title,presellPrice,paymentPrice,couponsID,couponsName,appointmentNums)
{
  if(!typeID)           typeID          = '';
  if(!title)            title           = '';
  if(!presellPrice)     presellPrice    = '';
  if(!paymentPrice)     paymentPrice    = '';
  if(!couponsID)        couponsID       = '';
  if(!couponsName)      couponsName     = '';
  if(!appointmentNums)  appointmentNums = '';

  var typeIdName = 'package';
  var html = '';
      html+='<div id="'+typeIdName+'">';
        html+='<dl>';
          html+='<dt>套票名称</dt>';
          html+='<dd><input type="text" name="title" class="inp_default" value="'+title+'" ></dd>';
        html+='</dl>';
        html+='<dl>';
          html+='<dt>预售款</dt>';
          html+='<dd><input type="text" name="presellPrice" class="inp_small" value="'+presellPrice+'" >元</dd>';
        html+='</dl>';
        html+='<dl>';
          html+='<dt>尾款</dt>';
          html+='<dd><input type="text" name="paymentPrice" class="inp_small" value="'+paymentPrice+'" >元</dd>';
        html+='</dl>';
        html+='<dl>';
          html+='<dt>尾款优惠券</dt>';
          // html+='<dd><input type="text" class="inp_small" value="'+couponsName+'" onFocus="couponsList()" ><input type="hidden" name="couponsID"  value="'+couponsID+'" ></dd>';
          html+='<dd><input type="text" class="inp_default" id="couponsName" value="'+couponsName+'" onkeyup="couponsList(this)" ><input type="hidden" name="couponsID"  value="'+couponsID+'" id="couponsID" ></dd>';
        html+='</dl>';
        html+='<dl>';
          html+='<dt>预约次数</dt>';
          html+='<dd><input type="text" name="appointmentNums" class="inp_small" value="'+appointmentNums+'" >次</dd>';
        html+='</dl>';
      html+='</div>';

  //页面层-自定义
  var Div = layer.open({
      type: 1,
      title: '添加/编辑套票',
      area: ['400px', '350px'],
      shift: 0, //从左动画弹出
      content: html,
      btn:['确定','取消'],
      yes: function(index){
        packageData(typeIdName,executeType,typeID);
      },
      cancel: function(){
        layer.close(Div);
      }
  });
}

/**
 * [packageData description]
 * @param  {[type]} typeIdName  [description]
 * @param  {[type]} executeType [description]
 * @param  {[type]} typeID      [description]
 * @return {[type]}             [description]
 */
function packageData(typeIdName,executeType,typeID)
{
  var obj             = $('#'+typeIdName);
  var pId             = "{$id}";
  var title           = obj.find('input[name="title"]').val();
  var presellPrice    = obj.find('input[name="presellPrice"]').val();
  var paymentPrice    = obj.find('input[name="paymentPrice"]').val();
  var couponsID       = obj.find('input[name="couponsID"]').val();
  var appointmentNums = obj.find('input[name="appointmentNums"]').val();

  $.ajax({
    url: '{:U(MODULE_NAME.'/Product/actDataAjax')}',
    type: 'POST',
    dataType: 'json',
    data: {'executeType': executeType ,'type': typeIdName,'pId': pId, 'typeID' : typeID, 'title': title, 'presellPrice': presellPrice, 'paymentPrice': paymentPrice, 'couponsID' : couponsID, 'appointmentNums': appointmentNums },
    success:function  (data) {
      if(data.valid == true)
      {
        layer.msg(data.state, {icon: 1});
        location.reload();
      }
      else
      {
         layer.msg(data.state, {icon: 2});
      }
    }
  })
}

/**
 * [couponsList description]
 * @return {[type]} [description]
 */
function couponsList(obj)
{
  var title = $(obj).val();
  $.ajax({
    url: '{:U(MODULE_NAME.'/Product/couponsListDataAjax')}',
    type: 'POST',
    dataType: 'json',
    data: {'title': title},
    success:function(data) {

      if(data.valid == true)
      {
        $(obj).parent().find('ul').remove();
        var html = '';
            html += '<ul style="position: fixed; left: 68px;">';
            for (var i = 0; i < data.couponsData.length; i++)
            {
              for (var o = 0; o < data.couponsData[i].length; o++)
              {
                html += '<li style="line-height: 20px;" onclick="selectCoupons(this,\''+data.couponsData[i][o]['id']+'\',\''+data.couponsData[i][o]['title']+'\')"><a href="#">'+data.couponsData[i][o]['title']+'</a></li>';
              }
            }
            html += '</ul>';

        $(obj).parent().append(html);
      }
    }
  })
}

/**
 * [selectCoupons description]
 * @return {[type]} [description]
 */
function selectCoupons(obj,id,title)
{
  $(obj).parent().parent().find('#couponsID').val(id);
  $(obj).parent().parent().find('#couponsName').val(title);
  $(obj).parent().remove();
}


/**
 * [groupAddOrEdit description]
 * @param  {[type]} executeType      [description]
 * @param  {[type]} pId              [description]
 * @param  {[type]} typeID           [description]
 * @param  {[type]} title            [description]
 * @param  {[type]} appointmentCheck [description]
 * @return {[type]}                  [description]
 */
function groupAddOrEdit(executeType,pId,typeID,title,appointmentCheck)
{
  if(!typeID)           typeID            = '';
  if(!title)            title             = '';
  if(!appointmentCheck) appointmentCheck  = '';
  var typeIdName = 'group';
  var html = '';
      html+='<div id="'+typeIdName+'">';
        html+='<dl>';
          html+='<dt>分组名称</dt>';
          html+='<dd><input type="text" name="title" class="inp_default" value="'+title+'" ></dd>';
        html+='</dl>';
        html+='<dl>';
          html+='<dt></dt>';
          if(appointmentCheck == '1')
          {
            html+='<dd><input type="checkbox" name="appointmentCheck" value="1" checked="checked" >分组内产品可多次预约</dd>';
          }
          else
          {
            html+='<dd><input type="checkbox" name="appointmentCheck" value="1" >分组内产品可多次预约</dd>';
          }
        html+='</dl>';
      html+='</div>';

  //页面层-自定义
  var Div = layer.open({
      type: 1,
      title: '添加/编辑产品',
      area: ['380px', '200px'],
      shift: 0, //从左动画弹出
      content: html,
      btn:['确定','取消'],
      yes: function(index){
        groupData(typeIdName,executeType,pId,typeID);
      },
      cancel: function(){
        layer.close(Div);
      }
  });
}

/**
 * [groupData description]
 * @param  {[type]} typeIdName  [description]
 * @param  {[type]} executeType [description]
 * @param  {[type]} pId         [description]
 * @param  {[type]} typeID      [description]
 * @return {[type]}             [description]
 */
function groupData(typeIdName,executeType,pId,typeID)
{
  var obj              = $('#'+typeIdName);
  var title            = obj.find('input[name="title"]').val();
  var appointmentCheck = obj.find('input[name="appointmentCheck"]:checked').val();
  $.ajax({
    url: '{:U(MODULE_NAME.'/Product/actDataAjax')}',
    type: 'POST',
    dataType: 'json',
    data: {'executeType': executeType, 'type': typeIdName, 'pId': pId, 'typeID': typeID,'title': title ,'appointmentCheck': appointmentCheck },
    success:function  (data) {
      if(data.valid == true)
      {
        layer.msg(data.state, {icon: 1});
        location.reload();
      }
      else
      {
         layer.msg(data.state, {icon: 2});
      }
    }
  })
}

/**
 * [productAddOrEdit description]
 * @param  {[type]} executeType [description]
 * @param  {[type]} pId         [description]
 * @param  {[type]} typeID      [description]
 * @param  {[type]} title       [description]
 * @return {[type]}             [description]
 */
function productAddOrEdit(executeType,pId,groupTitle,packageTitle,typeID,productID,title,appointmentCheck)
{
  if(!typeID)           typeID           = '';
  if(!title)            title            = '';
  if(!productID)        productID        = '';
  if(!appointmentCheck) appointmentCheck = '';
  if(!groupTitle)       groupTitle       = '';
  if(!packageTitle)     packageTitle     = '';

  var typeIdName = 'product';
  var html = '';
      html+='<div id="'+typeIdName+'">';
        html+='<dl>';
          html+='<dt>产品归属</dt>';
          html+='<dd> '+packageTitle+' > '+groupTitle+' </dd>';
        html+='</dl>';
        html+='<dl>';
          html+='<dt>产品ID</dt>';
          html+='<dd><input type="text" name="productID" class="inp_small" value="'+productID+'" ><input type="button" value="查询" onclick="productSearch(this)"> </dd>';
        html+='</dl>';
        html+='<dl>';
          html+='<dt>产品名称</dt>';
          html+='<dd><span id="productTitle">'+title+'</span></dd>';
        html+='</dl>';
        html+='<dl>';
          html+='<dt></dt>';
          if(appointmentCheck == '1')
          {
            html+='<dd><input type="checkbox" name="appointmentCheck" value="1" checked="checked" >该产品可多次预约</dd>';
          }
          else
          {
            html+='<dd><input type="checkbox" name="appointmentCheck" value="1" >该产品可多次预约</dd>';
          }
        html+='</dl>';
      html+='</div>';
  //页面层-自定义
  var Div = layer.open({
      type: 1,
      title: '添加/编辑产品',
      area: ['380px', '300px'],
      shift: 0, //从左动画弹出
      content: html,
      btn:['确定','取消'],
      yes: function(index){
        productData(typeIdName,executeType,pId,typeID);
      },
      cancel: function(){
        layer.close(Div);
      }
  });
}
/**
 * [productData description]
 * @param  {[type]} typeIdName  [description]
 * @param  {[type]} executeType [description]
 * @param  {[type]} pId         [description]
 * @param  {[type]} typeID      [description]
 * @return {[type]}             [description]
 */
function productData(typeIdName,executeType,pId,typeID)
{
  var obj       = $('#'+typeIdName);
  var productID = obj.find('input[name="productID"]').val();
  var appointmentCheck = obj.find('input[name="appointmentCheck"]:checked').val();
  $.ajax({
    url: '{:U(MODULE_NAME.'/Product/actDataAjax')}',
    type: 'POST',
    dataType: 'json',
    data: {'executeType': executeType, 'type': typeIdName, 'pId': pId, 'typeID': typeID ,'productID': productID,'appointmentCheck': appointmentCheck },
    success:function  (data) {
      if(data.valid == true)
      {
        layer.msg(data.state, {icon: 1});
        location.reload();
      }
      else
      {
         layer.msg(data.state, {icon: 2});
      }
    }
  })
}
/**
 * [productSearch description]
 * @return {[type]} [description]
 */
function productSearch(obj)
{
  var productID = $(obj).parent().find('input[name="productID"]').val();
  $.ajax({
    url: '{:U(MODULE_NAME.'/Product/productSearchAjax')}',
    type: 'POST',
    dataType: 'json',
    data: {'productID': productID},
    success:function  (data) {
      if(data.valid == true)
      {
        $(obj).parent().parent().parent().find('#productTitle').html(data.title);
      }
      else
      {
        layer.msg(data.state, {icon: 2});
      }
    }
  })

}
/**
 * [wrapForm description]
 * @param  {[type]} id   [description]
 * @param  {[type]} type [description]
 * @return {[type]}      [description]
 */
function wrapForm (id,type)
{
    $("#"+id).wrap("<form class='uploadImg' action='/Home/Public/uploadPic/fileType/Img/type/"+type+"/corp/1.html' method='post' enctype='multipart/form-data'></form>");
}
  /**
   * [uploadPic description]
   * @param  {[type]} obj [description]
   * @return {[type]}     [description]
   */
  function uploadPic(obj,name)
  {
      if($(obj).val() == "") return;

      $(obj).parent().ajaxSubmit({
          dataType:  'json',
          beforeSend: function() {
            $(obj).parent().parent().find('.fileupload').empty();
            $(obj).parent().parent().find('.fileupload').html("正在上传中...");
          },
          success: function(data) {

            if(data.state == 'SUCCESS')
            {
                $(obj).parent().parent().find('.fileupload').empty();
                $(obj).parent().parent().find('.fileupload').html("<img src='http://www.tripvip.cn"+data.url+"' width='120' height='120'>");
                $(obj).parent().parent().find('.fileupload').append("<input type='hidden' name='"+name+"' class='"+name+"' value='"+data.url+"'>");

            }
            else
            {
                $(obj).parent().parent().find('.fileupload').html(data.msg);
            }
        },
        error:function(xhr){
          $(obj).parent().parent().find('.fileupload').html('上传失败!');
          $(obj).parent().parent().find('.fileupload').html(xhr);
        }
      });
  }

/**
 * [submitDo description]
 * @return {[type]} [description]
 */
function submitDo()
{
  if($('input[name="title"]').length > 0)
  {
    if($('input[name="title"]').val().length > 0)
    {
      $('input[name="title"]').css('border','1px green solid');
      $('#form_do').submit();
    }
    else
    {
      $('input[name="title"]').css('border','1px red solid');
    }
  }
  else
  {
    $('#form_do').submit();
  }

}


</script>